.wrap { 
    margin-top: 80px; 
    perspective: 1000px;
  }
.cube{
    margin: 0 auto; 
    width: 200px; 
    height: 200px; 
    position: relative; 
    color: #fff; 
    font-size: 18px; 
    text-align: center; 
    line-height: 200px;
    transform-style: preserve-3d; 
    animation: rotate 6s infinite linear;
  }
/*定义动画*/
@keyframes rotate{
    0%{ 
        transform: rotateX(0deg) rotateY(0deg); 
    
    }
    100%{
         transform: rotateX(360deg) rotateY(360deg);
         }
 }
/*大立方体样式*/
.cube div{
    border: 1px solid #666;
     width: 100%; 
     height: 100%; 
     background-color: rgba(89, 93, 93, 0.4);
     position: absolute; 
     transition: all 1s;
  }
.cube .outer-front{
 
    transform: translateZ(100px);
}
.cube .outer-back{
    transform: translateZ(-100px) rotateY(-180deg);
 }
.cube .outer-left{
    transform: translateX(100px) rotateY(90deg);
}
.cube .outer-right{
    transform: translateX(-100px) rotateY(-90deg);
}
.cube .outer-top{
    transform: rotateX(90deg) translateZ(100px);
 }
.cube .outer-bottom{
    transform: rotateX(-90deg) translateZ(100px);
}


 /* 大立方体鼠标滑过         */
 .cube:hover .outer-front{
    transform: translateZ(200px);
}
 .cube:hover .outer-back{
    transform: translateZ(-200px) rotateY(-180deg);
 }
.cube:hover .outer-left{
    transform: translateX(200px) rotateY(90deg);
}
.cube:hover .outer-right{
    transform: translateX(-200px) rotateY(-90deg);
}
.cube:hover .outer-top{
    transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .outer-bottom{
    transform: rotateX(-90deg) translateZ(200px);
}  


/*小立方体*/
  .cube span{
     display: block; 
     width: 100px;
     height: 100px; 
     background: #fff;
     position: absolute;    
  }
  .cube span:nth-child(even){
   
   background: rgba(234, 231, 236,.5);
  }
.cube span:nth-child(odd){
     background: rgba(234, 231, 236,.5);
}
.cube .inner-front{
    background: #fff;
    transform: translateZ(50px) translateY(50px) translateX(50px);
}
.cube .inner-back{
    background: rgb(77, 12, 156);
    transform: translateZ(-50px) translateY(50px) rotateY(-180deg) translateX(-50px);
}
.cube .inner-left{
    background: rgb(77, 12, 156);
    transform: translateX(-50px) translateY(50px)  rotateY(-90deg) translateZ(-50px);
}
.cube .inner-right{
    background: rgb(77, 12, 156);
    transform: translateX(49px) translateY(50px) rotateY(90deg) translateZ(50px);
}
.cube .inner-top{
    background: rgb(77, 12, 156);
    transform: rotateX(90deg) translateZ(0px) translateX(50px);
}
.cube .inner-bottom{
    background: rgb(234, 231, 236);
    transform: rotateX(-90deg) translateZ(100px) translateX(50px);
}